<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    position: absolute;
}
#box{
    width: 400px;
    height: 400px;
    background-color: blue;
    top: 100px;
    left: 300px;
}
#box > div{
    background-color: yellow;
    height: 1px;
}
#word{
    color: blue;
    display: block;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 1;
    font: 200px/200px '楷体';
}
</style>
</head>
<body>
<div id="box">
    <span id="word">龍</span>
</div>
 
<script type="text/javascript">
var i = 1;
function createH(){
    if(i<=200){
        var width = i*2+'px';
        var left = (200-i)+'px';
    }else{
        var width = (400-(i-200)*2)+'px';
        var left = (i-200)+'px';
    }
    i++;
    var h = document.createElement('div');
    h.style.width = width;
    h.style.left = left;
    h.style.top = (i-2)+'px';
    return h;
}
var iA = setInterval(add,10);
function add(){
    if(i===400){
        clearInterval(iA);
        return false;
    }
    var h = createH();
    document.getElementById('box').appendChild(h);
}
</script>
</body>
</html>